<template>
    <Back url="/users" title="评分列表" />
    <el-table :data="datas" style="width: 100%" empty-text="没有数据">
        <el-table-column label="ID" prop="id" />
        <el-table-column label="标题" prop="name" />
        <el-table-column label="缩略图">
            <template v-slot="scope">
                <img :src="scope.row.thumbnail" />
            </template>
        </el-table-column>
        <el-table-column label="标签">
            <template v-slot="scope">
                <el-space :size="10">
                    <el-tag v-for="tag in scope.row.tags" :key="tag">{{
                        tag
                    }}</el-tag>
                </el-space>
            </template>
        </el-table-column>
    </el-table>
    <el-divider />
    <div class="pagination">
        <el-pagination background layout="prev, pager, next" :total="1000" />
    </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import { ref } from "vue";
import Back from "@/components/back";

const datas = ref([
    {
        id: "1",
        name: "标题1",
        thumbnail: "https://picsum.photos/100/150",
        tags: ["天地龙鳞", "人生"]
    },
    {
        id: "1",
        name: "标题1",
        thumbnail: "https://picsum.photos/100/150",
        tags: ["天地龙鳞", "人生"]
    },
    {
        id: "1",
        name: "标题1",
        thumbnail: "https://picsum.photos/100/150",
        tags: ["天地龙鳞", "人生"]
    }
]);
</script>

<style lang="scss" scoped></style>
